import React 						from 'react';
import MUtil        	from 'util/mm.jsx'
import Product         	from 'service/product-service.jsx';

const _util 			= new MUtil();
const _product 			= new Product();

class CategorySelect extends React.Component{
	constructor(props) {
	    super(props);
		this.state = {
			firstCategoryId:0,
			firstCategory:[],
			secondCategoryId:0,
			secondCategory:[]
		}
	}
	
	componentDidMount(){
		this.loadFirstCategory();
	}
	componentWillReceiveProps(nextProps){
		if(this.props.categoryId !== nextProps.categoryId && this.props.parentCategoryId !== nextProps.parentCategoryId){
			//只有一级品类
			if (nextProps.categoryId === nextProps.parentCategoryId) {
				this.setState({
					firstCategoryId:nextProps.parentCategoryId,
					secondCategoryId:0
				});
			}else{
				this.setState({
					firstCategoryId:nextProps.parentCategoryId,
					secondCategoryId:nextProps.categoryId
				},() => {
					this.loadSecondCategory();
				});
			}
		}
	}
	loadFirstCategory(){
		_product.getCategoryList()
		   .then(res => {
			   this.setState({
						firstCategory:res   
			   })
		   },errMsg => {
			   _mm.errorTips(errMsg);
		   });
	}
	loadSecondCategory(){
		_product.getCategoryList(this.state.firstCategoryId)
		.then(res => {
			this.setState({
				secondCategory:res   
			})
		},errMsg => {
			_mm.errorTips(errMsg);
		});
	}
	onFirstCategoryChange(e){
		if (this.props.readOnly) {
			return ;
		}
		this.setState({
			firstCategoryId:e.target.value,
			secondCategoryId:0,
			secondCategory:[]
		},() => {
			this.loadSecondCategory();
			this.onNotifyCategory();
		});
	}
	
	onSecondCategoryChange(e){
		if (this.props.readOnly) {
			return ;
		}
		this.setState({
			secondCategoryId:e.target.value,
		},() => {
			this.onNotifyCategory();
		});
	}
	
	onNotifyCategory(){
		if(typeof this.props.onCategoryChange !== 'function'){
			return;
		}
		if(this.state.secondCategoryId){
			this.props.onCategoryChange(this.state.firstCategoryId,this.state.secondCategoryId);
		}else{
			this.props.onCategoryChange(this.state.firstCategoryId,0);
		}
		
	}
	
	render(){
		return (
			<div>
				<div className="col-md-2">
					<select className="form-control" 
									onChange= {e => this.onFirstCategoryChange(e)}
									value={this.state.firstCategoryId}
									readOnly={this.props.readOnly} >
						<option value='0'>请选择一级分类</option>
						{
							this.state.firstCategory.map((category,index) => {
								return (<option value={category.id} key={index}>{category.name}</option>)
							})
						}
					</select>
				</div>
				{
					this.state.secondCategory.length > 0 
					? (
						<div className="col-md-2 second-cate">
							<select className="form-control" 
											onChange={e => this.onSecondCategoryChange(e)}
											value={this.state.secondCategoryId} 
											readOnly={this.props.readOnly} >
								<option value='0'>请选择二级分类</option>
								{
									this.state.secondCategory.map((category,index) => {
										return (<option value={category.id} key={index}>{category.name}</option>)
									})
								}
							</select>
						</div>
					  )
					: null
				}
				
			</div>
		)
	}
}

export default CategorySelect;
